<template>
    <!-- ok -->
    <view class="wanlpage-advert-banner" style="height: 780rpx; padding: 0 !important; margin: 0 !important">
        <swiper
            class="screen-swiper square-dot"
            :style="{ height: pageData.params.height }"
            :indicator-dots="true"
            :circular="true"
            :autoplay="true"
            :interval="pageData.params.interval"
            duration="500"
        >
            <swiper-item v-for="(item, index) in advertData" :key="index" @click="onTo(item)">
                <image :src="$wanlshop.oss(item.image, 414, 0, 1, 'transparent', 'png')" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    name: "WanlPageAdvertBanner",
    props: {
        pageData: {
            type: Object,
            default: function () {
                return {
                    name: "",
                    type: "",
                    params: [],
                    style: [],
                };
            },
        },
        advertData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            radius: "0rpx",
        };
    },
    mounted() {
        console.log(this.advertData, "----");
        if (this.pageData.style["border-radius"]) {
            this.radius = this.pageData.style["border-radius"];
        }
    },
    methods: {
        onTo(item) {
            this.$emit("onTo", item);
        },
    },
};
</script>
<style lang="scss">
.screen-swiper {
    min-height: 780rpx !important;

    image {
        overflow: hidden;
    }
}
</style>
